<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>el和data的两种写法</title>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <!-- data与el的两种写法
            1.el两种写法
                (1) new Vue的时候配置el属性
                (2) 先创建Vue实例，随后再通过v.$mount('#root')指定el的值
            2.data的两种写法
                (1) 对象式
                (2) 函数式：以后用到组件的时候，data必须指定函数式，否则会报错
            3.重要原则：
                由Vue管理的函数，一定不要写箭头函数，一但写了箭头函数，this就不再是Vue的实例了
        -->
        <!-- 准备好一个容器，名字是root -->
        <div id="root">
            <h1>你好，{{name}}</h1>
        </div>

        <script type="text/javascript">
            Vue.config.productionTip = false  // 阻止Vue在启动时生成生产提示，不起作用，直接改了vue.js中的值
            // 1--el的两种写法
            /*const v = new Vue({
                //el:'#root', // 第一种写法
                data:{  //data中用于存储数据，数据供el所指定的容器去使用
                    name:'张三'
                }
            })
            v.$mount('#root') //第二种写法*/

            //2--data的两种写法
            new Vue({
                el:'#root',
                //data的第一种写法--对象式
                // data:{
                //     name:'张三'
                // }

                //data的第二种写法--函数式，后面的组件要使用这种方式
                data:function(){  //可简写为data(){}
                    console.log("@@",this)//使用普通函数，此处的this是Vue的实例对象
                    return{
                        name:'李四'
                    }
                }
                // data:()=>{
                //     console.log("@@",this)//使用箭头函数，是没有自己的this，往外找找到了Windows的this，此处的this是全局的window
                //     return{
                //         name:'李四'
                //     }
                // }
            })
        </script>

        
    </body>
</html>